<template>
  <div class="home">
    <div class="content">
      <h1 class="title">旨在让你获得超凡的生产力</h1>
      <p class="subtitle">TraeAI 是使用 AI 编写代码的最佳方式</p>
      
      <div class="button-group">
        <button class="btn primary">
          <img src="/windows.svg" alt="windows" class="icon">
          下载 WINDOWS
        </button>
        <button class="btn secondary">所有下载</button>
      </div>
    </div>

    <div class="partners">
      <img v-for="partner in partners" 
           :key="partner"
           :src="`/partners/${partner}.svg`" 
           :alt="partner"
           class="partner-logo">
    </div>
  </div>
</template>

<script setup lang="ts">
const partners = [
  'shopify',
  'openai',
  'replicate',
  'perplexity',
  'midjourney',
  'samsung',
  'instacart',
  'ramp',
  'vercel'
]
</script>

<style scoped lang="less">
.home {
  min-height: 100vh;
  background: linear-gradient(45deg, #2A0845, #6441A5, #2a9fd6);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: white;
  position: relative;
  
  .content {
    text-align: center;
    padding: 0 20px;
  }

  .title {
    font-size: 2.5rem;
    margin-bottom: 1rem;
  }

  .subtitle {
    font-size: 1.2rem;
    margin-bottom: 2rem;
    opacity: 0.9;
  }

  .button-group {
    display: flex;
    gap: 1rem;
    justify-content: center;
  }

  .btn {
    padding: 0.8rem 2rem;
    border-radius: 5px;
    border: none;
    font-size: 1rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    
    &.primary {
      background-color: white;
      color: #2A0845;
    }
    
    &.secondary {
      background-color: transparent;
      border: 1px solid white;
      color: white;
    }

    .icon {
      width: 20px;
      height: 20px;
    }
  }

  .partners {
    position: absolute;
    bottom: 50px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 3rem;
    padding: 2rem;
    opacity: 0.7;

    .partner-logo {
      height: 30px;
      filter: brightness(0) invert(1);
    }
  }
}
</style>